<template>
  <!-- 角色管理 -->
  <div class="role">
    <div class="role-left">
      <div class="add-role-btn">
        <img src="@/assets/imgs/role/addcion.svg" alt="" />
        创建角色
      </div>
      <div
        v-for="item in roleList"
        :key="item.id"
        class="role-itme"
        :class="{ 'active-item': activeId == item.id }"
        @click="activeId = item.id"
      >
        <!-- <img class="icon" :src="`/src/assets/imgs/role/${item.icon}.png`" /> -->
        <i class="iconfont avat" :class="item.icon"></i>
        {{ item.name }}
      </div>
    </div>
    <div class="role-right">
      <div class="tabs">
        <div
          v-for="item in tabsList"
          :key="item.id"
          class="tab-item"
          :class="{ 'active-tab': activeTab == item.id }"
          @click="activeTab = item.id"
        >
          {{ item.name }}
        </div>
      </div>

      <div v-if="activeId == 1" class="content">
        <span> 管理员：负责整个系统的数据管理、用户管理、实验管理</span>
        <span class="save">保存</span>
      </div>

      <div class="role-contanier">
        <div v-for="item in 100">{{ item }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({});

let emit = defineEmits([""]);
 
const roleList = ref([
  {
    name: "管理员",
    id: 1,
    icon: "icon-yingyongguanliyuanguanli",
    // img:new URL(`@/assets/imgs/role/gly.png`, import.meta.url).href
  },
  {
    name: "运维人员",
    id: 2,
    icon: "icon-yunweirenyuan",
  },
  {
    name: "实验成员",
    id: 3,
    icon: "icon-chengyuan",
  },
]);
const activeId = ref(1);

// 右侧
const tabsList = [
  {
    name: "角色权限",
    id: 1,
  },
  {
    name: "角色用户",
    id: 2,
  },
];
const activeTab = ref(1);
onMounted(() => {});
</script>
<style scoped lang="scss">
@keyframes move {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.role {
  width: 100%;
  height: 100%;

  overflow: hidden;
  animation: move 0.2s ease-in-out;
  display: flex;

  .role-left {
    .item {
      width: 240px;
      height: 60px;
      line-height: 60px;
      font-size: 14px;
      color: #fcfdff;
      margin-top: 20px;
    }
    width: 300px;
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    .add-role-btn {
      background: url(@/assets/imgs/role/addrole.svg) no-repeat;
      background-size: 100% 100%;
      text-align: center;

      @extend .item;
      img {
        vertical-align: middle;
      }

    }
  }
  .role-itme {
    @extend .item;
    padding: 0 20px;
    &:hover {
      background-color: #1a74ff63;
    }
    .avat {
      display: inline-block;
      width: 30px;
      height: 30px;
      // vertical-align: middle;
      font-size: 24px;
      color: #169bd5;
    }
  }
  .active-item {
    background-color: #235096;

    border-right: 10px solid #1a74ff;
  }
  .role-right {
    width: calc(100% - 300px);
    height: 100%;

    border: 1px solid #fff;
    .tabs {
      height: 32px;
      display: flex;
      .tab-item {
        margin-right: 1px;
        width: 200px;
        line-height: 32px;
        text-align: center;
        background: rgb(108, 108, 108);
        font-size: 14px;
      }
      .active-tab {
        background: #2698c8;
      }
    }

    .content {
      height: 40px;

      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .save {
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background: #169bd5;
        text-align: center;
        border-radius: 5px;
      }
    }

    .role-contanier {
      width: calc(100% - 10px);
      height: calc(100% - 92px);

      margin: 10px 0 0px 10px;
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      border: 2px solid red;
    }
  }
}
</style>
